import React, {Component} from 'react';
import {Layout} from "antd";
import {toggleSideMenu} from "redux/action/app";
import {connect} from "react-redux";
import {withRouter} from "react-router";
import Menus from "./Menus";
import Logo from "./Logo";
const {  Sider  } = Layout;

class SideMenu extends Component<any,any> {

    render() {
        // trigger={<div className='h-100' style={{fontSize:"20px"}}>{this.props.menuCollapsed?<RightSquareOutlined/>:<LeftSquareOutlined />}</div>}
        return (
            <Sider
                   onCollapse={value => {this.props.toggleSideMenu()}}
                   collapsible
                   collapsed={this.props.menuCollapsed }
                   className={"h-100"}>
                <div className={" d-flex flex-column h-100"}>
                    <Logo/>
                    <Menus/>
                </div>
            </Sider>
        );
    }
}

const mapStateToProps=(state:any)=>{
    return state.app
}

const mapDispatchToProps={toggleSideMenu}

const WithConnect=connect(mapStateToProps,mapDispatchToProps)(SideMenu)

export default withRouter(WithConnect)


